<script lang="ts" setup>
defineProps({
  uploadButttonName: {
    type: String,
    default: '上传',
  },
  maxLength: {
    type: Number,
    default: 1,
  },
  accept: {
    type: String,
    default: '',
  },
})
const emit = defineEmits(['accept'])
const handleRemove = () => {
  emit('accept', '')
}
async function uploadRequest(file) {
  const reader = new FileReader()
  reader.onload = function (event) {
    const jsonData = JSON.parse(event.target.result)
    emit('accept', JSON.stringify(jsonData))
  }
  // 读取文件内容
  reader.readAsText(file.file)
}
</script>
<template>
  <el-upload
    :on-remove="handleRemove"
    :limit="maxLength"
    accept=".json"
    :http-request="uploadRequest"
  >
    <el-button type="primary">{{ uploadButttonName }}</el-button>
  </el-upload>
</template>
